<template>
  <op-table-page
    ref="pageRef"
    v-bind="{ ...pageConfig, tableList }"
    @buttonClick="buttonClick"
  ></op-table-page>
  <el-button @click="importExcel">import excel</el-button>

  <op-form :formList="formList">
    <template #test="{ item, config }"> {{ item.prop }} {{ config.prependSlot }} </template>
    <template #appendSlot="{ item, config }"> {{ item.prop }} {{ config.appendSlot }} </template>
  </op-form>
  <op-table v-bind="importConfig" :tableData="tableData" @itemEvent="itemEvent"></op-table>
  <op-dialog-import ref="dialogRef" />
</template>
<script setup>
import { onMounted } from 'vue';
import { pageConfig, tableList, formList, importConfig } from './config.js';

const dialogRef = ref();
const pageRef = ref();
const tableData = ref([
  {
    id: 1,
    staffNo: [1, 2],
    attachList: [
      { name: 'fujian0fujian0fujian0fujian0fujian0.excel', url: '2222' },
      { name: '333.pdf', url: '444' },
    ],
  },
  { id: 2, staffNo: [3, 4] },
]);

onMounted(() => {
  pageRef.value.getDataList();
});

function buttonClick(data) {
  console.log(data, 'datadddd');
}

function importExcel() {
  dialogRef.value.init();
}

function itemEvent(data) {
  console.log(data, 'data');
}
</script>
